<template>
    <div>
        <el-dialog
            v-model="appDialog.visible"
            custom-class="marketing_app_dialog dialog_body_noPadding"
            width="815px"
            :before-close="closeDialog">
            <template #title>
                <div class="dialog_header">营销工具</div>
            </template>
            <!-- tab -->
            <div class="tab_box">
                <el-tabs v-model="tabIndex" class="demo-tabs" @tab-change="initFun">
                    <el-tab-pane v-for="item in tabsList" :key="item.label" :label="item.name" :name="item.label">
                        <div class="pane-box">
                            <el-input
                                v-model="searchName"
                                placeholder="搜索标题"
                                type="text"
                                :prefix-icon="Search"
                                @input="seachTab(item)">
                            </el-input>
                            <div v-if="marketList.length > 0" class="pane-body-box">
                                <blockquote v-for="it in marketList" :key="it.id">
                                    <div
                                        v-if="it.qr_code_link && item.label == tabIndex"
                                        class="item"
                                        @click="chooseItem(it)">
                                        <div class="absoult"></div>
                                        <img :src="it.qr_code_link" alt="" />
                                        <el-tooltip
                                            :content="it.activity_name"
                                            :disabled="disabled"
                                            effect="light"
                                            placement="top">
                                            <div class="desc" @mouseenter="handleMouse($event)">
                                                {{ it.activity_name }}
                                            </div>
                                        </el-tooltip>
                                        <el-checkbox v-model="it.isCheck" class="checkBox" />
                                    </div>
                                </blockquote>
                            </div>
                            <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <ZWPagination ref="PaginationRef" @submit="pageLimitFun" />
                <el-scrollbar class="group_box">
                    <Grouping :tree-data="treeData" @submit="getChildGroup"></Grouping>
                </el-scrollbar>
            </div>
            <template #footer>
                <div class="footer_box">
                    <div class="right_footer">
                        <el-button class="ml20" @click="closeDialog">取消</el-button>
                        <el-button class="ml20" type="primary" @click="submitHandel">保存</el-button>
                    </div>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, defineEmits, defineExpose, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { isTextBeyond } from '@/utils/utils';
const emit = defineEmits(['save', 'close']);
import { Search } from '@element-plus/icons-vue';
import Dialog from '@/components/Dialog.vue';
import Grouping from '../../../friendcirclemat/components/Grouping.vue';
import ZWPagination from '@/components/ZWPagination.vue';
import {
    getGroupMarket,
    getMarketChannel,
    getMarketGroup,
    getMarketFission,
    getMarketLottery,
    getMarketStore,
    getMarketRed,
    getMarketRedFission,
    getMarketSing,
    getMarketPassword
} from '@/api/highMaterial/poster';
import { useStore } from '@/store';
const store = useStore();
const PaginationRef = ref(null);
const chooseInfo = ref([]); //当前选择的数据
const searchName = ref();
const tabsList = ref([
    { label: '1', name: '渠道活码' },
    { label: '2', name: '群活码' },
    { label: '3', name: '裂变引流' },
    { label: '4', name: '抽奖' },
    { label: '5', name: '门店获客' },
    { label: '6', name: '红包拉新' },
    { label: '7', name: '红包裂变' },
    { label: '8', name: '签到活动' },
    { label: '9', name: '口令红包' }
    // { label: '5', name: '签到活动' }
]);
const marketList = ref([]);

// 关闭
const closeDialog = () => {
    appDialog.value.visible = false;
    emit('close');
};
// 保存
const submitHandel = () => {
    emit('save', {
        list: chooseInfo.value,
        idList: chooseInfo.value.map((it: any) => {
            return it.id;
        })
    });
    closeDialog();
};

const appDialog = ref({
    visible: false,
    title: '营销工具',
    width: '815px',
    cancel: closeDialog,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确认',
    multiple: false, //是否是多选
    chooseArr: [] //回显的数据  id
});
const tabIndex = ref('1');

const pageParam = ref({
    page: 1,
    page_size: 15,
    group_id: 0
    // name: ''
});
const treeData = ref([]); //分组信息

// 获取当前索引
const getNowIndex = () => {
    const index = tabsList.value.findIndex((it: any) => {
        return it.label == tabIndex.value;
    });
    // pageParam.value.activity_status = '2'
    switch (index) {
        case 0:
        case 1:
        case 2:
        case 3:
        case 4:
        case 5:
        case 6:
        case 8:
            pageParam.value.activity_status = '2';
            break;
        case 7:
            pageParam.value.status = '2';
            break;
    }
    return index;
};
// 获取分组数据
const getGroupListFun = (val?: number) => {
    const arr = ['11', '12', '16', '13', '15', '14', '17', '18', '19'];
    getGroupMarket({ type: arr[getNowIndex()], name: '' }).then((r: any) => {
        treeData.value = r.data;
    });
};
// 获取列表
const getListFun = () => {
    // let apiArr = [getMarketChannel, getMarketGroup, getMarketFission, getMarketLottery, getMarketSignIn, getMarketStore]
    const apiArr = [
        getMarketChannel,
        getMarketGroup,
        getMarketFission,
        getMarketLottery,
        getMarketStore,
        getMarketRed,
        getMarketRedFission,
        getMarketSing,
        getMarketPassword
    ];
    apiArr[getNowIndex()]({ ...pageParam.value }).then((r: any) => {
        const arr: any = [];
        if (r.data) {
            r.data.forEach((item: any) => {
                if (item.qr_code_link) {
                    const index = appDialog.value.chooseArr.findIndex((it: any) => {
                        return it == item.id;
                    });
                    if (!item.id) item.id = item.activity_id;
                    item.isCheck = index == -1 ? false : true;
                    arr.push(item);
                }
            });
            marketList.value = arr;
        }
        store.dispatch('pageTotal', r.total || 0);
    });
};

// 搜索
const seachListFun = () => {
    store.dispatch('pageTotal', 0);
    PaginationRef.value.pageInit();
    pageParam.value.page = 1;
    searchName.value = '';
    pageParam.value.page_size = 15;
    getListFun();
};
let time = '';
const seachTab = (val: any, item: any) => {
    switch (getNowIndex()) {
        case 0:
            pageParam.value.title = searchName.value;
            break;
        case 1:
            pageParam.value.name = searchName.value;
            break;
        case 2:
        case 4:
        case 5:
        case 6:
        case 8:
            pageParam.value.activity_name = searchName.value;
            break;
        case 3:
        case 7:
            pageParam.value.title = searchName.value;
            break;
    }
    if (time) {
        clearTimeout(time);
    }

    time = setTimeout(() => {
        seachListFun();
    }, 500);
};
// 初始化
const initFun = () => {
    getGroupListFun();
    chooseInfo.value = [];
    if (PaginationRef.value) {
        PaginationRef.value.pageInit();
    }
    pageParam.value = {
        page: 1,
        page_size: 15,
        group_id: 0
        // name: ''
    };
    store.dispatch('pageTotal', 0);
    getListFun();
};

const chooseItem = (val: any) => {
    // 当前是多选
    val.isCheck = !val.isCheck;
    if (appDialog.value.multiple) {
        if (val.isCheck) {
            chooseInfo.value.push(val);
        } else {
            const index = chooseInfo.value.findIndex(it => {
                it.id == val.id;
            });
            chooseInfo.value.splice(index, 1);
        }
    } else {
        if (val.isCheck) {
            chooseInfo.value = [val];
        } else {
            chooseInfo.value = [];
        }
    }
    marketList.value.forEach((item: any) => {
        const index = chooseInfo.value.findIndex((it: any) => {
            return it.id == item.id;
        });
        item.isCheck = index == -1 ? false : true;
    });
    // tabsList.value = tabsList.value.map((item: any) => {
    //   let index = chooseInfo.value.findIndex((it: any) => {
    //     return it.id == item.id
    //   })
    //   item.isCheck = index == -1 ? false : true
    //   console.log(item, 'itemitem')
    //   return item
    // })
};

const disabled = ref(true);
const handleMouse = (e: any) => {
    disabled.value = isTextBeyond(e);
};

watch(
    () => appDialog.value.visible,
    val => {
        if (val) {
            initFun();
        }
    }
);

// 分页信息
const pageLimitFun = (val: any) => {
    pageParam.value.page = val.page;
    pageParam.value.page_size = val.page_size;
    getListFun();
};

// 选择分组
const getChildGroup = (val: any) => {
    store.dispatch('pageTotal', 0);
    PaginationRef.value.pageInit();
    pageParam.value.page = 1;
    pageParam.value.page_size = 15;
    pageParam.value.group_id = val.id;
    getListFun();
};

defineExpose({
    appDialog
});
</script>
<style lang="scss" scoped>
.tab_box {
    min-height: 600px;
    position: relative;
    z-index: 99999;

    .group_box {
        position: absolute;
        width: 170px;
        left: 0;
        top: 40px;
        height: calc(100% - 40px);
        border-right: solid 1px #eaeaea;
    }

    .pane-box {
        height: 504px;
        padding-left: 190px;
        padding-right: 30px;
    }

    .pane-body-box {
        margin-top: 12px;
        width: 100%;
        height: 504px;
        overflow-y: scroll;

        blockquote {
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 20px;
            margin-right: 10px;

            &:nth-child(5n) {
                margin-right: 0;
            }
        }

        .absoult {
            position: absolute;
            top: -6px;
            left: 6px;
            z-index: 10;
            width: 100px;
            height: 100px;
        }

        .item {
            display: inline-block;
            vertical-align: middle;
            width: 110px;
            position: relative;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #33302d;

            .desc {
                padding-top: 8px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                cursor: pointer;
            }

            img {
                width: 110px;
                height: 110px;
            }

            .checkBox {
                position: absolute;
                top: -6px;
                left: 6px;
            }
        }
    }

    .pane-body-box::-webkit-scrollbar {
        width: 0 !important;
    }

    .pane-body-box::-webkit-scrollbar {
        width: 0 !important;
        height: 0;
    }
}

.r_tab {
    position: absolute;
    top: 0;
    right: 30px;
    line-height: 40px;
}

.footer_box {
    text-align: right;
}

:deep(.demo-tabs) {
    .el-tabs__header {
        background: #f9f9f9;
    }

    .el-tabs__item {
        padding: 0 20px !important;
    }
}

:deep(.marketing_app_dialog) {
    .el-dialog__header {
        padding: 0;

        .el-dialog__headerbtn {
            .el-dialog__close {
                font-size: 20px;
            }
        }
    }

    .el-dialog__body {
        padding: 0;
    }

    .dialog_header {
        height: 50px;
        display: flex;
        padding: 0 30px;
        align-items: center;
        font-size: 16px;
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-weight: 500;
        color: #33302d;
        line-height: 16px;
        border-bottom: 1px solid #eaeaea;
    }

    .el-dialog__footer {
        height: 60px;
        box-sizing: border-box;
        padding: 10px 30px;
        border-top: 1px solid #eaeaea;

        .el-button {
            height: 36px;
            min-height: auto;
        }

        .upload_demo {
            display: inline-block;
            cursor: pointer;
        }
    }

    .ml20 {
        margin-left: 20px;
    }
}
</style>
